import React, {Component} from 'react'
import './playBar.styl'
  // 转换时间
const changeTime = (time) => {
        time = Math.floor(time)
        let min = Math.floor(time / 60)
        let sec = time - min * 60
        return sec >= 10 ? min + ':' + sec : min + ':0' + sec
}
class PlayBar extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    handlePre () {
        this.props.preSong()
    }
    handlePrePlayOrPause () {
        this.props.playOrPause()
    }
    handleNextSong () {
        this.props.nextSong()
    }
    render() {
        let width = (this.props.currentTime / this.props.duration) * 100
        return (
            <div className='playBar'>
                <div className='play_progress'>
                    <span className='start_time'>{changeTime(this.props.currentTime)}</span>
                    <span className='progress'>
                        <span className='active_bar' style={{width: width + '%'}}>
                            <span className='active_bar_btn'></span>
                        </span>
                    </span>
                    <span className='end_time'>{changeTime(this.props.duration)}</span>
                </div>

                <div className='operate_btn'>
                    <span className='play_model'>
                         <i className='iconfont icon-suijibofang01'></i>
                    </span>
                    <i className='iconfont icon-icon-1' onClick={() => {this.handlePre()}}></i>
                    {
                        this.props.playStatus ?
                            <i className='iconfont play icon-zanting' onClick={() => {this.handlePrePlayOrPause()}}></i> : <i className='iconfont play icon-bofang' onClick={() => {this.handlePrePlayOrPause()}}></i>
                    }

                    <i className='iconfont icon-icon-' onClick={() => {this.handleNextSong()}}></i>
                </div>
            </div>
        )
    }
}

export default PlayBar